<template>
  <div class="calculator">
    <div class="display">
      <input v-model="displayValue" readonly />
    </div>
    <div class="buttons">
      <button @click="clear">C</button>
      <button @click="sign">+/-</button>
      <button @click="percent">%</button>
      <button @click="operatorHandler('/')">/</button>
      
      <button @click="numberHandler('7')">7</button>
      <button @click="numberHandler('8')">8</button>
      <button @click="numberHandler('9')">9</button>
      <button @click="operatorHandler('*')">×</button>
      
      <button @click="numberHandler('4')">4</button>
      <button @click="numberHandler('5')">5</button>
      <button @click="numberHandler('6')">6</button>
      <button @click="operatorHandler('-')">-</button>
      
      <button @click="numberHandler('1')">1</button>
      <button @click="numberHandler('2')">2</button>
      <button @click="numberHandler('3')">3</button>
      <button @click="operatorHandler('+')">+</button>
      
      <button @click="numberHandler('0')" class="zero">0</button>
      <button @click="decimalHandler">.</button>
      <button @click="calculate">=</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const displayValue = ref('0')
const firstOperand = ref<number | null>(null)
const operator = ref<string | null>(null)
const waitingForOperand = ref(false)

function clear() {
  displayValue.value = '0'
  firstOperand.value = null
  operator.value = null
  waitingForOperand.value = false
}

function sign() {
  const value = parseFloat(displayValue.value)
  displayValue.value = String(-value)
}

function percent() {
  const value = parseFloat(displayValue.value)
  displayValue.value = String(value / 100)
}

function numberHandler(number: string) {
  if (waitingForOperand.value) {
    displayValue.value = number
    waitingForOperand.value = false
  } else {
    displayValue.value = displayValue.value === '0' ? number : displayValue.value + number
  }
}

function decimalHandler() {
  if (waitingForOperand.value) {
    displayValue.value = '0.'
    waitingForOperand.value = false
    return
  }

  if (!displayValue.value.includes('.')) {
    displayValue.value += '.'
  }
}

function operatorHandler(nextOperator: string) {
  const inputValue = parseFloat(displayValue.value)

  if (firstOperand.value === null) {
    firstOperand.value = inputValue
  } else if (operator.value) {
    const result = performCalculation()
    displayValue.value = String(result)
    firstOperand.value = result
  }

  waitingForOperand.value = true
  operator.value = nextOperator
}

function performCalculation(): number | null {
  if (firstOperand.value === null || operator.value === null) {
    return null
  }

  const secondOperand = parseFloat(displayValue.value)
  
  switch (operator.value) {
    case '+':
      return firstOperand.value + secondOperand
    case '-':
      return firstOperand.value - secondOperand
    case '*':
      return firstOperand.value * secondOperand
    case '/':
      return secondOperand !== 0 ? firstOperand.value / secondOperand : 0
    default:
      return null
  }
}

function calculate() {
  const result = performCalculation()
  
  if (result !== null) {
    displayValue.value = String(result)
    firstOperand.value = result
    operator.value = null
    waitingForOperand.value = true
  }
}
</script>

<style scoped>
.calculator {
  width: 300px;
  margin: 50px auto;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

.display {
  margin-bottom: 15px;
}

.display input {
  width: 100%;
  height: 60px;
  font-size: 2rem;
  text-align: right;
  padding: 0 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-sizing: border-box;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

button {
  height: 60px;
  font-size: 1.5rem;
  border: none;
  border-radius: 5px;
  background-color: #e0e0e0;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #d5d5d5;
}

button:active {
  background-color: #c0c0c0;
}

.zero {
  grid-column: span 2;
}

.buttons button:nth-child(4n) {
  background-color: #f0a500;
  color: white;
}

.buttons button:nth-child(4n):hover {
  background-color: #e09500;
}

.buttons button:nth-child(4n):active {
  background-color: #d08500;
}

.buttons button:first-child,
.buttons button:nth-child(2),
.buttons button:nth-child(3) {
  background-color: #a0a0a0;
  color: white;
}

.buttons button:first-child:hover,
.buttons button:nth-child(2):hover,
.buttons button:nth-child(3):hover {
  background-color: #909090;
}

.buttons button:first-child:active,
.buttons button:nth-child(2):active,
.buttons button:nth-child(3):active {
  background-color: #808080;
}
</style>